<html lang="en"><head>
<meta charset="UTF-8">
<title>TIME</title>
<link href="/favicon.png" type="image/png" rel="shortcut icon">
<link href="https://lncmcc.cn/favicon.png" rel="apple-touch-icon">
<link rel="apple-touch-icon-precomposed" href="https://lncmcc.cn/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">


<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --circle-x: 4;
  --circle-y: 6;
  --circle-size: calc((100vw / calc(var(--circle-x) * 2)) - .5rem);
}
@media (min-width: 480px) {
  :root {
    --circle-size: 50px;
  }
}

body {
  background: #F9FAFB;
  font-family: Inter, sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.container header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 2rem 1rem 0;
}
.container h1 {
  font-size: clamp(1.5rem, 4vw, 4rem);
  font-weight: 700;
  color: #1F2937;
}

.watch-container {
  display: grid;
  grid-template-columns: repeat(2, calc(var(--circle-x) * var(--circle-size)));
  grid-template-rows: repeat(2, calc(var(--circle-y) * var(--circle-size)));
  margin-top: 2rem;
}

.watch-circle-container {
  display: grid;
  grid-template-columns: repeat(var(--circle-x), var(--circle-size));
  grid-template-rows: repeat(var(--circle-y), var(--circle-size));
}

span {
  font-size: var(--circle-size);
  width: 1em;
  height: 1em;
  border-radius: 50%;
  display: block;
  position: relative;
  box-shadow: inset 1px -1px 2px 1px rgba(0, 0, 0, 0.17);
  overflow: hidden;
}
span:before, span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: calc(var(--circle-size) / 2);
  width: 3px;
  background: #1F2937;
  transition: 5s;
  transform-origin: bottom;
}
span::before {
  transform: rotate(var(--angle-1));
}
span::after {
  transform: rotate(var(--angle-2));
}
</style>

</head>
<body style="

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
">

<div class="container" style="
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
">

  <div class="watch-container">
    <div class="watch-circle-container" id="watch-circle-0"><span style="--angle-1:90deg; --angle-2:180deg;"></span><span style="--angle-1:90deg; --angle-2:270deg;"></span><span style="--angle-1:90deg; --angle-2:270deg;"></span><span style="--angle-1:180deg; --angle-2:270deg;"></span><span style="--angle-1:0deg; --angle-2:180deg;"></span><span style="--angle-1:90deg; --angle-2:180deg;"></span><span style="--angle-1:180deg; --angle-2:270deg;"></span><span style="--angle-1:0deg; --angle-2:180deg;"></span><span style="--angle-1:0deg; --angle-2:180deg;"></span><span style="--angle-1:0deg; --angle-2:180deg;"></span><span style="--angle-1:0deg; --angle-2:180deg;"></span><span style="--angle-1:0deg; --angle-2:180deg;"></span><span style="--angle-1:0deg; --angle-2:180deg;"></span><span style="--angle-1:0deg; --angle-2:180deg;"></span><span style="--angle-1:0deg; --angle-2:180deg;"></span><span style="--angle-1:0deg; --angle-2:180deg;"></span><span style="--angle-1:0deg; --angle-2:180deg;"></span><span style="--angle-1:0deg; --angle-2:90deg;"></span><span style="--angle-1:0deg; --angle-2:270deg;"></span><span style="--angle-1:0deg; --angle-2:180deg;"></span><span style="--angle-1:0deg; --angle-2:90deg;"></span><span style="--angle-1:90deg; --angle-2:270deg;"></span><span style="--angle-1:90deg; --angle-2:270deg;"></span><span style="--angle-1:0deg; --angle-2:270deg;"></span>
    </div>
    <div class="watch-circle-container" id="watch-circle-1"><span style="--angle-1:90deg; --angle-2:180deg;"></span><span style="--angle-1:90deg; --angle-2:270deg;"></span><span style="--angle-1:180deg; --angle-2:270deg;"></span><span style="--angle-1:225deg; --angle-2:225deg;"></span><span style="--angle-1:0deg; --angle-2:90deg;"></span><span style="--angle-1:180deg; --angle-2:270deg;"></span><span style="--angle-1:180deg; --angle-2:0deg;"></span><span style="--angle-1:225deg; --angle-2:225deg;"></span><span style="--angle-1:225deg; --angle-2:225deg;"></span><span style="--angle-1:180deg; --angle-2:0deg;"></span><span style="--angle-1:180deg; --angle-2:0deg;"></span><span style="--angle-1:225deg; --angle-2:225deg;"></span><span style="--angle-1:225deg; --angle-2:225deg;"></span><span style="--angle-1:180deg; --angle-2:0deg;"></span><span style="--angle-1:180deg; --angle-2:0deg;"></span><span style="--angle-1:225deg; --angle-2:225deg;"></span><span style="--angle-1:90deg; --angle-2:180deg;"></span><span style="--angle-1:270deg; --angle-2:0deg;"></span><span style="--angle-1:0deg; --angle-2:90deg;"></span><span style="--angle-1:180deg; --angle-2:270deg;"></span><span style="--angle-1:90deg; --angle-2:0deg;"></span><span style="--angle-1:90deg; --angle-2:270deg;"></span><span style="--angle-1:270deg; --angle-2:90deg;"></span><span style="--angle-1:0deg; --angle-2:270deg;"></span>
    </div>
    <div class="watch-circle-container" id="watch-circle-2"><span style="--angle-1:180deg; --angle-2:90deg;"></span><span style="--angle-1:90deg; --angle-2:270deg;"></span><span style="--angle-1:90deg; --angle-2:270deg;"></span><span style="--angle-1:270deg; --angle-2:180deg;"></span><span style="--angle-1:0deg; --angle-2:90deg;"></span><span style="--angle-1:90deg; --angle-2:270deg;"></span><span style="--angle-1:270deg; --angle-2:180deg;"></span><span style="--angle-1:180deg; --angle-2:0deg;"></span><span style="--angle-1:180deg; --angle-2:90deg;"></span><span style="--angle-1:270deg; --angle-2:90deg;"></span><span style="--angle-1:0deg; --angle-2:270deg;"></span><span style="--angle-1:180deg; --angle-2:0deg;"></span><span style="--angle-1:0deg; --angle-2:180deg;"></span><span style="--angle-1:180deg; --angle-2:90deg;"></span><span style="--angle-1:270deg; --angle-2:90deg;"></span><span style="--angle-1:270deg; --angle-2:0deg;"></span><span style="--angle-1:180deg; --angle-2:0deg;"></span><span style="--angle-1:0deg; --angle-2:90deg;"></span><span style="--angle-1:270deg; --angle-2:90deg;"></span><span style="--angle-1:180deg; --angle-2:270deg;"></span><span style="--angle-1:0deg; --angle-2:90deg;"></span><span style="--angle-1:270deg; --angle-2:90deg;"></span><span style="--angle-1:270deg; --angle-2:90deg;"></span><span style="--angle-1:270deg; --angle-2:0deg;"></span>
    </div>
    <div class="watch-circle-container" id="watch-circle-3"><span style="--angle-1:180deg; --angle-2:90deg;"></span><span style="--angle-1:180deg; --angle-2:270deg;"></span><span style="--angle-1:225deg; --angle-2:225deg;"></span><span style="--angle-1:225deg; --angle-2:225deg;"></span><span style="--angle-1:0deg; --angle-2:180deg;"></span><span style="--angle-1:180deg; --angle-2:0deg;"></span><span style="--angle-1:225deg; --angle-2:225deg;"></span><span style="--angle-1:225deg; --angle-2:225deg;"></span><span style="--angle-1:0deg; --angle-2:180deg;"></span><span style="--angle-1:180deg; --angle-2:0deg;"></span><span style="--angle-1:180deg; --angle-2:90deg;"></span><span style="--angle-1:180deg; --angle-2:270deg;"></span><span style="--angle-1:0deg; --angle-2:180deg;"></span><span style="--angle-1:0deg; --angle-2:90deg;"></span><span style="--angle-1:0deg; --angle-2:270deg;"></span><span style="--angle-1:180deg; --angle-2:0deg;"></span><span style="--angle-1:0deg; --angle-2:90deg;"></span><span style="--angle-1:270deg; --angle-2:90deg;"></span><span style="--angle-1:180deg; --angle-2:270deg;"></span><span style="--angle-1:180deg; --angle-2:0deg;"></span><span style="--angle-1:225deg; --angle-2:225deg;"></span><span style="--angle-1:225deg; --angle-2:225deg;"></span><span style="--angle-1:0deg; --angle-2:90deg;"></span><span style="--angle-1:270deg; --angle-2:0deg;"></span>
    </div>
  </div>


</div>

<script type="text/javascript">
const digits = {
	0: [
		[90, 180],
		[90, 270],
		[90, 270],
		[180, 270],

		[0, 180],
		[90, 180],
		[180, 270],
		[0, 180],

		[0, 180],
		[0, 180],
		[0, 180],
		[0, 180],

		[0, 180],
		[0, 180],
		[0, 180],
		[0, 180],

		[0, 180],
		[0, 90],
		[0, 270],
		[0, 180],

		[0, 90],
		[90, 270],
		[90, 270],
		[0, 270]
	],
	1: [
		[90, 180],
		[90, 270],
		[180, 270],
		[225, 225],
		[0, 90],
		[180, 270],
		[180, 0],
		[225, 225],
		[225, 225],
		[180, 0],
		[180, 0],
		[225, 225],
		[225, 225],
		[180, 0],
		[180, 0],
		[225, 225],
		[90, 180],
		[270, 0],
		[0, 90],
		[180, 270],
		[90, 0],
		[90, 270],
		[270, 90],
		[0, 270]
	],
	2: [
		[180, 90],
		[90, 270],
		[90, 270],
		[270, 180],
		[0, 90],
		[90, 270],
		[270, 180],
		[180, 0],
		[180, 90],
		[270, 90],
		[0, 270],
		[180, 0],
		[0, 180],
		[180, 90],
		[270, 90],
		[270, 0],
		[180, 0],
		[0, 90],
		[270, 90],
		[180, 270],
		[0, 90],
		[270, 90],
		[270, 90],
		[270, 0]
	],
	3: [
		[180, 90],
		[90, 270],
		[90, 270],
		[270, 180],
		[0, 90],
		[90, 270],
		[270, 180],
		[180, 0],
		[180, 90],
		[270, 90],
		[0, 270],
		[180, 0],
		[90, 0],
		[270, 90],
		[180, 270],
		[180, 0],
		[90, 180],
		[270, 90],
		[0, 270],
		[180, 0],
		[0, 90],
		[270, 90],
		[270, 90],
		[270, 0]
	],
	4: [
		[180, 90],
		[180, 270],
		[225, 225],
		[225, 225],
		[0, 180],
		[180, 0],
		[225, 225],
		[225, 225],
		[0, 180],
		[180, 0],
		[180, 90],
		[180, 270],
		[0, 180],
		[0, 90],
		[0, 270],
		[180, 0],
		[0, 90],
		[270, 90],
		[180, 270],
		[180, 0],
		[225, 225],
		[225, 225],
		[0, 90],
		[270, 0]
	],
	5: [
		[180, 90],
		[90, 270],
		[90, 270],
		[270, 180],
		[180, 0],
		[180, 90],
		[90, 270],
		[270, 0],
		[0, 180],
		[0, 90],
		[90, 270],
		[270, 180],
		[0, 90],
		[90, 270],
		[270, 180],
		[180, 0],
		[180, 90],
		[270, 90],
		[0, 270],
		[180, 0],
		[0, 90],
		[270, 90],
		[270, 90],
		[270, 0]
	],
	6: [
		[180, 90],
		[90, 270],
		[90, 270],
		[270, 180],
		[0, 180],
		[90, 180],
		[270, 90],
		[0, 270],
		[180, 0],
		[0, 90],
		[270, 90],
		[180, 270],
		[180, 0],
		[90, 180],
		[270, 180],
		[0, 180],
		[0, 180],
		[0, 90],
		[270, 0],
		[180, 0],
		[0, 90],
		[270, 90],
		[270, 90],
		[270, 0]
	],
	7: [
		[180, 90],
		[270, 90],
		[270, 90],
		[270, 180],
		[90, 0],
		[270, 90],
		[270, 225],
		[225, 0],
		[225, 225],
		[45, 180],
		[45, 180],
		[225, 225],
		[225, 225],
		[0, 180],
		[0, 180],
		[225, 225],
		[225, 225],
		[0, 180],
		[0, 180],
		[225, 225],
		[225, 225],
		[0, 90],
		[0, 270],
		[225, 225]
	],
	8: [
		[180, 90],
		[90, 270],
		[90, 270],
		[270, 180],
		[180, 0],
		[90, 180],
		[270, 180],
		[180, 0],
		[180, 0],
		[90, 0],
		[0, 270],
		[180, 0],
		[0, 180],
		[180, 90],
		[180, 270],
		[0, 180],
		[180, 0],
		[90, 0],
		[270, 0],
		[180, 0],
		[0, 90],
		[90, 270],
		[270, 90],
		[270, 0]
	],
	9: [
		[180, 90],
		[90, 270],
		[90, 270],
		[270, 180],
		[0, 180],
		[90, 180],
		[270, 180],
		[180, 0],
		[180, 0],
		[0, 90],
		[0, 270],
		[180, 0],
		[0, 90],
		[90, 270],
		[180, 270],
		[0, 180],
		[90, 180],
		[90, 270],
		[0, 270],
		[180, 0],
		[0, 90],
		[270, 90],
		[270, 90],
		[270, 0]
	]
};

const set = (el, value) => {
	const spans = el.querySelectorAll("span");
	spans.forEach((span, index) => {
		span.style.setProperty("--angle-1", `${value[index][0]}deg`);
		span.style.setProperty("--angle-2", `${value[index][1]}deg`);
	});
};
setInterval(() => {
	const date = new Date();
	const [h1, h2] = date.getHours().toString().padStart(2, "0");
	const [m1, m2] = date.getMinutes().toString().padStart(2, "0");
	const time = [h1, h2, m1, m2];
	for (let i = 0; i < time.length; i++) {
		set(document.querySelector(`#watch-circle-${i}`), digits[time[i]]);
	}
}, 100);
</script>

</body>
</html>
